import '@/utils/console.js' // 去掉打印语句
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'amfe-flexible' // 用来设置根标签字体大小做移动端适配
import 'highlight.js/styles/default.css' // 代码高亮的样式
import { directiveObj } from '@/utils/directive'
import './utils/VueVant' // vant组件注册，单独的分离成一个Js文件，让main.js更清晰
import axios from 'axios'

// 执行目标对象里的install方法并传入Vue类
Vue.config.productionTip = false
Vue.use(directiveObj)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// 组件使用套路：
// 1、明确目标，找到类似组件
// 2、引入注册然后复制过来
// 3、读和删除没用的
// 4、修改，改成我们想要的样子

// 样式修改：
// 1、找到类名，自己写css覆盖掉它
// 2、看文档，是否支持自定义样式

// 首页->滚动位置保存
// 问题：首页滚动一些，点击个人中心再切回来为什么滚动条回到了顶部
// 疑惑：组件缓存keep-alive只会保存组件标签+样式+js变量，组件缓存不会保存滚动位置
// 原因：切换到我的页面，页面高度不够高，没有滚动条(此滚动条是整个网页的)，滚动位置会回到顶部，所以切换回首页，只是内容改变了，滚动条还在顶部
// 解决：滚动时，实时保存，在它的路由对象里的mate中保留它的滚动位置

// 什么东西封装---会变的东西---(切记要封装什么要在src文件夹下面建文件)
// 1、标签结构会变---封装组件用插槽
// 2、组件里的变量会变---用prop
// 3、一个项目里面可能会变的存储方式---localStorage/sessionStorage/cookie
// 4、需要用的token
// 5、一个项目里面可能会变的基地址---在request里封装
// 6、接口
// 7、可能会变的弹窗---也要封装(UI组件)
// 8、自定义指令

// 知识点
// 大数问题:
// 模拟后端返回的JSON字符串响应的数据
const str = '[{"id": 1302900300041101987}, {"id": 1205340366642205763}, {"id": 7689021398237123422}]'
const arr = JSON.parse(str) // 转成数组--数不一样了
console.log(arr)
// 问题1：转成数组类型，数字发现精度丢失(后四位不准确了)
// 问题2：如果把丢失精度的文章id传给后台，后台是找不到文章的
// 原因1：后端的id生成算法，和前端不同，产生19位数字
// 原因2：js有效安全数字是有范围的
// Number.MAX_SAFE_INTEGER：最大安全范围
// 解决：json-bigint第三方包。内部会把数字JSON字符串拆分，分成对象的形式/字符串形式
const jsonBig = require('json-bigint')({ storeAsString: true })
// ({ storeAsString: true }) 转化时以字符串存储，不要BigNumber对象
// webpack+nodejs环境执行main.js，所以在这里是可以用require的，和import导入的东西一样
console.log(jsonBig.parse(str)) // BigNumber自定义类的对象

// v-model原理
// 实现双向数据绑定。具体是把vue的变量和标签的value属性的值进行双向关联。本质：给所在标签的value属性赋值，给所在标签绑定 @input事件，把值回传给对应的vue变量。还有object.definexxxxx

// webpack开发服务器做代理转发
// 例如：直接请求，会报跨域错误
axios({
  url: 'http://c.m.163.com/nc/article/headline/T1348647853363/0-40.html'
  // url: '/api/nc/article/headline/T1348647853363/0-40.html'
}).then(res => {
  console.log(res)
})
// 原因：前端请求后端接口跨域问题，但是后端既不支持jsonp也不支持cors，前端无法直接请求
// 解决：跨域解决方案第三种-代理服务器
// 使用：还好webpack开发服务器，默认就支持代理转发的功能，但是需要配置代理转发的地址
// (1)：在vue.config.js中，设置devServer服务器配置项
// (2)：axios请求，要请求本地开发服务器相对地址开头/api
// (3)：改完配置，重启服务器

// 项目打包-流程
// (1)：运行yarn build 打包命令，产生dist文件，src下跟main.js有引入关系的打包输出到dist下
// (2)：尝试用vscode中liveServer网页运行插件(内置启动：5500端口的网页浏览服务)
// liveServer插件会把工作区(vscode编辑器根目录当作服务器根目录)
// 问题：打开的index.html网页空白，控制台全是404错误
// 原因：打包时，webpack在index.html中引入其他的打包文件，路径全是/服务器根路径请求
// 运行时，是在5500端口下运行，服务器根目录没有css和js文件夹，而是在index.js文件的隔壁(相对路径)
// 解决：让webpack打包时，引入其他文件要以./开头，而不能以/开头
// 在vue.config.js项目中，加入pablicPath:'./' 重新打包
// 打包后观察index.html中，其实./被省略了
// 最后，只需要把dist文件夹，发给后端/运维工程师(专门管服务器的)，进行上线部署

// 打包后产物介绍
// 名字对应.vue中js和css代码，懒加载所以分散打包
// js中有.map文件：记录你打包之前代码的行数和列数
// 原因：线上环境报错，因为运行的js压缩成了1行，报错在第一行，我无法寻找代码打包之前的位置，无法定位代码错误行数。
// .map文件作用：辅助你查找代码报错的行数和列数(灵魂地图)

// 打包后跨域问题
// 情况1：后端直接开启cors(黑马头条就是这样)
// 开发环境，生产打包环境(以后部署)，都可以直接访问接口，无需考虑跨域问题
// 隐患：后端接口暴露了，任何人找到都可以直接请求(有风险)
// 解决：需要登录+token调用接口

// 情况2：后端不开启cors(网易云音乐/网易i新闻/以后公司的后台接口)
// 开发环境1：node.js+webpack开发服务器做代理转发(yarn serve)(黑马头条)
// 开发环境2：node.js+express在本地搭建一个服务器做代理转发(网易云音乐)
// 这两种本质都是基于node.js
// 生产环境：yarn build打包dist文件，和weibpack开发服务器没有任何关系，没有人给你转发了，需要自己准备服务器转发
// 解决：
// 1、把你自己搭建的node.js + webpack在本地搭建的代理服务器和dist一起部署到一个云服务器上。前端dist->node.js+webpack服务器地址(http-serve包-快速搭建一个代理转发的服务器)->请求真正的后台接口
// 2、dist和公司的后台接口服务，直接放在一个云服务器上(避免跨域访问)
